<template>
  <div class="staffManagement">
    <!-- 顶部 -->
    <el-card class="box-card">
      <div class="first">
        <el-form>
          <el-form-item>
            <el-input
              v-model="queryData.name"
              placeholder="员工姓名"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-input
              v-model="queryData.phone"
              placeholder="手机号"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-select
              v-model="queryData.stationName"
              placeholder="岗位"
              clearable
            >
              <el-option
                v-for="item in postList"
                :key="item.id"
                :label="item.stationName"
                :value="item.stationName"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="queryData.rank" placeholder="级别" clearable>
              <el-option
                v-for="item in rankList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select
              v-model="queryData.providerName"
              placeholder="供应商"
              clearable
            >
              <el-option
                v-for="item in supplierList"
                :key="item.id"
                :label="item.providerName"
                :value="item.providerName"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div class="second">
        <el-form>
          <el-form-item>
            <el-select
              v-model="queryData.isProject"
              placeholder="是否在项目"
              clearable
            >
              <el-option
                v-for="item in jobList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select
              v-model.number="queryData.job"
              placeholder="在职状态"
              clearable
            >
              <el-option
                v-for="item in jobsList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button @click="handlerSeach">查询</el-button>
            <el-button type="primary" @click="handlerAddStaff"
              >新增员工</el-button
            >
            <el-upload
              class="upload-demo inline-block"
              action="http://ebzefy.natappfree.cc/spring/excel/userUpload"
              multiple
              :on-success="successD"
              :file-list="fileList"
              :show-file-list="false"
            >
              <el-button type="warning" :loading="baseloading">导入</el-button>
            </el-upload>
            <el-button type="warning" @click="exportTable">导出</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <!-- 表格 -->
    <el-card class="box-card">
      <el-table
        v-loading="loading"
        id="table-list"
        :data="staffList"
        style="width: 100%"
      >
        <el-table-column fixed prop="name" label="员工姓名" align="center">
        </el-table-column>
        <el-table-column prop="phone" label="手机号" align="center" width="120">
        </el-table-column>
        <el-table-column prop="email" label="邮箱" align="center" width="180">
        </el-table-column>
        <el-table-column prop="sex" label="性别" align="center">
          <template slot-scope="scope">
            {{ scope.row.sex == 0 ? "男" : "女" }}
          </template>
        </el-table-column>
        <el-table-column
          prop="idNumber"
          label="身份证"
          align="center"
          width="170"
        >
        </el-table-column>
        <el-table-column prop="age" label="年龄" align="center">
          <!-- <template slot-scope="scope">
                        <div>{{getage(scope.row.birthday)}}</div>
                    </template> -->
        </el-table-column>
        <el-table-column
          prop="stationName"
          label="岗位"
          align="center"
          width="120"
        >
        </el-table-column>
        <el-table-column prop="rank" label="级别" align="center">
          <template slot-scope="scope">
            <div>
              {{
                scope.row.rank === 0
                  ? "初级"
                  : scope.row.rank === 1
                  ? "中级"
                  : scope.row.rank == 2
                  ? "高级"
                  : "初级"
              }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="yearsWorking" label="工作年限" align="center">
        </el-table-column>
        <el-table-column
          prop="providerName"
          label="所属供应商"
          align="center"
          width="100"
        >
        </el-table-column>
        <el-table-column
          prop="hiredate"
          label="入职时间"
          align="center"
          width="150"
        >
        </el-table-column>
        <el-table-column prop="job" label="在职状态" align="center">
          <template slot-scope="scope">
            <div :class="scope.row.job == 0 ? 'green' : 'gray'">
              {{ scope.row.job == 0 ? "在职" : "离职" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="resignationTime"
          label="离职时间"
          align="center"
          width="150"
        >
        </el-table-column>
        <el-table-column prop="isProject" label="是否在项目" align="center">
          <template slot-scope="scope">
            <div :class="scope.row.isProject == 0 ? 'green' : 'gray'">
              {{ scope.row.isProject == 0 ? "是" : "否" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="address"
          fixed="right"
          label="操作"
          align="center"
          width="120"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="handlerEditStaff(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              type="text"
              v-show="scope.row.job == 0"
              size="small"
              @click="handlerdiMission(scope.row)"
              >离职</el-button
            >
            <el-button
              type="text"
              v-show="scope.row.job == 1"
              size="small"
              @click="handelerEntry(scope.row)"
              >入职</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <Pagination
        :total="total"
        :page.sync="queryData.pageNum"
        :limit.sync="queryData.pageSize"
        @pagination="getStaffList"
      />
    </el-card>
    <!-- 新增弹窗 -->
    <Addstaff
      :addDialogVisible="addDialogVisible"
      :postList="postList"
      :rankList="rankList"
      :supplierList="supplierList"
      @staffCancel="staffCancel"
      @addStaff="addStaff"
    />
    <!-- 编辑弹窗 -->
    <EditStaff
      :editDialogVisible="editDialogVisible"
      :postList="postList"
      :rankList="rankList"
      :supplierList="supplierList"
      :editForm="editForm"
      @editStaffCancel="editStaffCancel"
      @editStaff="editStaff"
    />
  </div>
</template>
<script>
// 导入接口文件
import {
  getStaff,
  getPost,
  getSupplier,
  addStaff,
  putState,
  deletStaff,
  editStaff,
  userUpload,
} from "../../api/staff";

import axios from "axios";
import Pagination from "../../components/Pagination/index.vue";
import Addstaff from "./components/addstaff.vue";
import EditStaff from "./components/editStaff.vue";
export default {
  components: {
    Addstaff,
    EditStaff,
    Pagination,
  },
  data() {
    return {
      baseloading: false,
      fileList: [],
      loading: true,
      editForm: {},
      addDialogVisible: false,
      editDialogVisible: false,
      total: 0, //总条数
      queryData: {
        pageNum: 1, //当前显示多少数据
        pageSize: 8, // 当前页
        name: "", //员工名称
        job: "", //在职状态 0：在职/1：离职
        phone: "", //电话号码
        providerName: "", //供应商名称
        rank: "", //级别
        stationName: "", //岗位名称
        isProject: "", //是否在项目
      }, //请求参数
      region: "",
      regiont: "",
      regions: "",
      birthdays: "2001/7/7",
      userAge: "",
      staffList: [],
      postList: [], //岗位数据
      supplierList: [], //供应商数据
      rankList: [
        { label: "初级", value: 0 },
        { label: "中级", value: 1 },
        { label: "高级", value: 2 },
      ],
      jobList: [
        { label: "是", value: 0 },
        { label: "否", value: 1 },
      ],
      jobsList: [
        { label: "在职", value: 0 },
        { label: "离职", value: 1 },
      ],
    };
  },
  created() {
    this.getStaffList();
  },
  methods: {
    // 获取数据
    getStaffList() {
      getStaff(this.queryData).then((res) => {
        if (res.status === 200) {
          this.loading = false;
          this.staffList = res.data.records; //列表数据
          this.total = res.data.total; //总条数
          this.queryData.pageNum = res.data.current; //当前页
          this.queryData.pageSize = res.data.size; //每页显示条数
        }
      });
      // 获取岗位数据
      getPost().then((res) => {
        if (res.status === 200) {
          this.postList = res.data;
        }
      });
      getSupplier().then((res) => {
        if (res.status === 200) {
          this.supplierList = res.data;
        }
      });
    },
    // 打开新增员工弹窗
    handlerAddStaff() {
      this.addDialogVisible = true;
    },
    // 取消添加按钮
    staffCancel(valFalse) {
      this.addDialogVisible = valFalse;
    },
    // 确定添加按钮
    addStaff(userDto, valFalse) {
      addStaff(userDto).then((res) => {
        if (res.status === 200) {
          this.getStaffList();
          this.$message({
            message: "新增成功",
            type: "success",
          });
          this.addDialogVisible = valFalse;
        }
      });
    },
    // 打开修改弹窗按钮
    handlerEditStaff(index, row) {
      this.editDialogVisible = true;
      this.editForm = Object.assign({}, row); //将数据传入dialog页面
      this.editForm.index = index; //传递当前index
    },
    // 取消编辑按钮
    editStaffCancel(valFalse) {
      this.editDialogVisible = valFalse;
    },
    // 确认编辑按钮
    editStaff(valFalse) {
      editStaff(this.editForm).then((res) => {
        if (res.status === 200) {
          this.getStaffList();
          this.$message({
            message: "修改成功",
            type: "success",
          });
        }
      });
      this.editDialogVisible = valFalse;
    },
    // 离职按钮
    handlerdiMission(rows) {
      this.$confirm('确认修改该员工在职状态为"离职"', "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          putState({ id: rows.id }).then((res) => {
            if (res.status === 200) {
              this.getStaffList();
              this.$message({
                type: "success",
                message: "离职成功!",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消离职",
          });
        });
    },
    // 入职按钮
    handelerEntry(rows) {
      this.$confirm('确认修改该员工在职状态为"在职"', "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          putState({ id: rows.id }).then((res) => {
            if (res.status === 200) {
              this.getStaffList();
              this.$message({
                type: "success",
                message: "入职成功!",
              });
            }
          });
          rows.resignationTime = "";
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消入职",
          });
        });
    },
    // 查询按钮
    handlerSeach() {
      this.getStaffList();
    },
    // 导出按钮
    exportTable() {
      axios({
        url: "http://ebzefy.natappfree.cc/spring/excel/userExport",
        method: "get",
        responseType: "blob",
      })
        .then((response) => {
          console.log(response);
          if (!response || !response.data) {
            return;
          }
          let blob = new Blob([response.data]); //response.data为后端传的流文件
          let downloadFilename = "员工信息.xlsx"; //设置导出的文件名
          if (window.navigator && window.navigator.msSaveOrOpenBlob) {
            //兼容ie浏览器
            window.navigator.msSaveOrOpenBlob(blob, downloadFilename);
          } else {
            //谷歌,火狐等浏览器
            let url = window.URL.createObjectURL(blob);
            let downloadElement = document.createElement("a");
            downloadElement.style.display = "none";
            downloadElement.href = url;
            downloadElement.download = downloadFilename;
            document.body.appendChild(downloadElement);
            downloadElement.click();
            document.body.removeChild(downloadElement);
            window.URL.revokeObjectURL(url);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    successD() {
      this.$message({
        message: "上传成功",
        type: "success",
      });
      this.getStaffList() 
    },
  },
};
</script>
<style lang="scss" scoped>
.inline-block {
  display: inline-block;
  margin: 0 10px;
}
.el-card {
  margin: 20px;
  .el-input {
    width: 160px;
  }
  .first {
    .el-form {
      display: flex;
      justify-content: space-evenly;
    }
  }
  .second {
    .el-form {
      display: flex;
      justify-content: space-evenly;
    }
  }
  .el-pagination {
    margin: 20px;
    float: right;
  }
  .green {
    color: #3fac9d;
    font-weight: 600;
  }
  .gray {
    color: #7b7a7e;
    font-weight: 600;
  }
}
</style>
